<template>
  <div>
    <header class="title">
      <span v-if="required" class="required"></span>
      <slot name="desc"></slot>
      <!-- <span class="type-tip"><slot name="typeTip"></slot></span> -->
      <span v-if="len !== undefined" class="type-tip">&nbsp;【请选择{{ len[0] }}-{{ len[1] }}项】</span>
    </header>
  </div>
</template>

<script>
export default {
  name: 'headerTitle',
  props: ['required', 'len']
}
</script>

<style lang="less" scoped>
// 标题
header.title {
  font-size: 15px;
  color: #444444;
  font-weight: bold;
  line-height: 20px;
  position: relative;

  > span {
    // 是否必填
    &.required {
      position: absolute;
      left: -10px;
      color: red;
      font-weight: bold;
      &::after {
        content: "*";
      }
    }
    // 提示
    &.type-tip {
      color: #999;
      font-weight: normal;
      font-size: 14px;
    }
  }
}
</style>